import React from 'react';
import Sidebar from './Sidebar';
import Header from './Header';
import './document.css';

const KnowledgeBase: React.FC = () => {
  return (
    <div className='document-container'>
      <Sidebar activeItem='knowledge-base' />
      <div className='main-content'>
        <Header />
        <div className='content-area'>
          <div className='content-header'>
            <h1>知识库</h1>
            <p>构建和管理团队知识库</p>
          </div>
          <div className='content-body'>
            <div className='welcome-card'>
              <h2>知识库列表</h2>
              <p>团队的知识库集合</p>
              <div className='feature-grid'>
                <div className='feature-item'>
                  <h3>📚 技术文档库</h3>
                  <p>技术相关文档和指南</p>
                </div>
                <div className='feature-item'>
                  <h3>📖 产品手册</h3>
                  <p>产品使用说明和手册</p>
                </div>
                <div className='feature-item'>
                  <h3>📝 最佳实践</h3>
                  <p>团队最佳实践总结</p>
                </div>
                <div className='feature-item'>
                  <h3>📋 FAQ 常见问题</h3>
                  <p>常见问题解答集合</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default KnowledgeBase;
